<template>
  <div class="tree-container">
    <div class="head-container head-top">
      <el-input v-model="deptName" class="mb-20px" clearable placeholder="请输入部门名称">
        <template #prefix>
          <Icon icon="ep:search" />
        </template>
      </el-input>
    </div>
    <div class="head-container">
      <el-tree
        ref="treeRef"
        :data="deptList"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        :props="defaultProps"
        default-expand-all
        highlight-current
        node-key="id"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node" @mouseenter="handleMouseEnter(data)" @mouseleave="handleMouseLeave()">
              <span>{{ node.label }}</span>
              <span v-show="data.id === actionNodeId" class="tree-actions">
                <a @click="appendNode(data)"><Icon icon="ep:circle-plus-filled" /></a>
                <a style="margin-left: 8px" @click="removeNode(node, data)"><Icon icon="ep:remove-filled" /></a>
                <a style="margin-left: 8px" @click="editNode(node, data)"><Icon icon="ep:edit" /></a>
              </span>
          </div>
        </template>
      </el-tree>
    </div>
    <TreeNodeForm ref="treeFormRef" />
  </div>
    
</template>

<script lang="ts" setup>
import { ElTree } from 'element-plus'
import * as DeptApi from '@/api/system/dept'
import { defaultProps, handleTree } from '@/utils/tree'
import TreeNodeForm from './TreeNodeForm.vue'

defineOptions({ name: 'SystemUserDeptTree' })

const deptName = ref('')
const deptList = ref<Tree[]>([]) // 树形结构
const treeRef = ref<InstanceType<typeof ElTree>>()

/** 获得部门树 */
const getTree = async () => {
  const res = await DeptApi.getSimpleDeptList()
  deptList.value = []
  deptList.value.push(...handleTree(res))
}

/** 基于名字过滤 */
const filterNode = (name: string, data: Tree) => {
  if (!name) return true
  return data.name.includes(name)
}

/** 处理部门被点击 */
const handleNodeClick = async (row: { [key: string]: any }) => {
  emits('node-click', row)
}
const emits = defineEmits(['node-click'])

const actionNode = ref<Tree | null>(null);

const actionNodeId = ref<number | null>(null)
 
const handleMouseEnter = (data: Tree) => {
  actionNode.value = data;
  actionNodeId.value = data.id
  console.log('handleMouseEnter', data)
};
const handleMouseLeave = () => {
  actionNodeId.value = null
  console.log('handleMouseEnter')

};


const treeFormRef = ref()
const openForm = (type: string, data?: Object) => {
  treeFormRef.value.open(type, data)
}
const appendNode = (data: Tree) => {
  openForm('create', data)
}

const removeNode = (node: Node, data: Tree) => {
  // const parent = node.parentId
  // const children: Tree[] = parent.data.children || parent.data
  // const index = children.findIndex((d) => d.id === data.id)
  // children.splice(index, 1)
  // deptList.value = [...deptList.value]
}

const editNode = (node: Node, data: Tree) => {
  openForm('update', data)
  // const parent = data.parentId
  // const children: Tree[] = parent.data.children || parent.data
  // const index = children.findIndex((d) => d.id === data.id)
  // children.splice(index, 1)
  // deptList.value = [...deptList.value]
}

/** 监听deptName */
watch(deptName, (val) => {
  treeRef.value!.filter(val)
})

/** 初始化 */
onMounted(async () => {
  await getTree()
})
</script>

<style scoped lang="scss">
.tree-container {
  background-color: #fff;
  border: 1px solid #CDD7D5;
  .head-container {
    padding: 16px;
  }
  .head-top {
    border-bottom: 1px solid #CDD7D5;
    .el-input {
      margin-bottom: 0;
    }
  }
}
.custom-tree-node {
  position: relative;
  width: 100%;
  .tree-actions {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
